<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./box-zh.css">
    <title>正常盒子及怪异盒子模型</title>
</head>

<body>
    <div class="linex" id="one"></div>
    <div class="linex" id="two"></div>
    <div class="liney" id="three"></div>
    <div class="liney" id="four"></div>
    <div class="linex" id="five"></div>
    <div class="linex" id="six"></div>
    <div class="linex" id="seven"></div>

    <!-- 正常盒子模型——padding和border属性操作 -->
    <div class="comment-title" style="margin-top:200px;">正常盒子模型——padding和border属性操作</div>
    <div class="comment" style="margin-top:200px; "><strong>关键代码：</strong>
        <br/> margin-left: 300px;
        <br/> margin-top: 200px;v width: 300px;
        <br/> height: 300px;
        <br/> background-color: yellow;
        <br/> position: absolute;
        <br/>
        <strong>padding: 50px 0 0 0;</strong>
        <br/>
        <strong>border: 5px solid blue;</strong>
        <br/>
        <br/>
        <strong>解释：</strong>
        <br/>对黄色盒子只进行了上部padding，导致该方向尺寸拉长，相当于将自身撑开。对黄色盒子加外边距，盒子自身黄色尺寸不变，但是整体尺寸加宽。（这个过程中对红色盒子没有额外属性操作）
    </div>
    <div class="paddingborder">
        <div class="xiezi">鞋子</div>
    </div>

    <!-- 正常盒子模型——margin属性操作 -->
    <div class="comment-title" style="margin-top:600px;">正常盒子模型——margin属性操作</div>
    <div class="comment" style="margin-top:600px; "><strong>关键代码：</strong>
        <br/> width: 100px;
        <br/> height: 100px;
        <br/> background-color: red;
        <br/>
        <strong>position: absolute;</strong>
        <br/>
        <strong>margin-left: 200px;</strong>
        <br/>
        <strong>margin-top: 100px;</strong>
        <br/>
        <br/>
        <strong>解释：</strong>
        <br/>对内部红色盒子进行margin属性操作时，为了避免异常建议将红色盒子进行“Position：absolute；”属性设置，此时margin偏移将由外层盒子（黄色盒子）的position状态决定偏移情况：如果外层为absolte或者relative，则相对外容器偏移，否则相对于浏览器左上角原点偏移。
    </div>
    <div class="margin">
        <div class="margin-xiezi">鞋子</div>
    </div>

    <!-- 怪异盒子模型 -->
    <div class="comment-title" style="margin-top:900px;">怪异盒子模型</div>
    <div class="comment" style="margin-top:900px; "><strong>关键代码：</strong>
        <br/> margin-left: 300px;
        <br/> margin-top: 900px;
        <br/> width: 300px;
        <br/> height: 300px;
        <br/> background-color: yellow;
        <br/> position: absolute;
        <br/>
        <strong>box-sizing:border-box;</strong>
        <br/> padding: 50px;
        <br/> border: 50px solid blue;
        <br/>
        <br/>
        <strong>解释：</strong>
        <br/>使用代码“box-sizing:border-box;”对黄色盒子（300*300）进行属性操作时，盒子的自身最外长度和宽度尺寸就固定下来，随后进行的border和padding属性操作都是在向内收缩。
    </div>
    <div class="guaiyihezi">
        <div class="xiezi">鞋子</div>
    </div>
</body>

</html>